<!--引入面包屑组件-->
<pro-header></pro-header>

<!--引入list组件-->
<nz-card [nzBordered]="false">
    <!--  form表单搜索 -->
    <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment"> <label for="guidApp">应用系统</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-select style="width:100%" [(ngModel)]="system.guidApp" nzAllowClear  name="guidApp"  (nzOpenChange)="queryApplist()" [nzSize]="'large'" [nzPlaceHolder]="'应用系统'" nzId="guidApp">
                            <nz-option *ngFor="let i of guidApp; let app = index" [nzLabel]="i.appCode + '---' + i.appName" [nzValue]="i.guid"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>


            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment"> <label for="guidApp">参数组别</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-input [(ngModel)]="system.groupName" name="name"  [nzSize]="'large'" [nzPlaceHolder]="'参数组别'" nzId="groupName"></nz-input>
                    </div>
                </div>
            </div>

            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment">   <label for="keyName">参数键</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-input [(ngModel)]="system.keyName" name="name" [nzSize]="'large'" [nzPlaceHolder]="'参数键'" nzId="keyName"></nz-input>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm"   nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment">   <label for="keyName">参数值类型</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-select style="width:100%" nzAllowClear [(ngModel)]="system.valueFrom" name="valueFrom" [nzSize]="'large'" [nzPlaceHolder]="'参数值类型'"
                                   nzId="valueFrom">
                            <nz-option *ngFor="let i of valueFrom; let app = index" [nzLabel]="i.text" [nzValue]="i.key"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm && system.valueFrom === 'D'"   nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment">   <label for="keyName">业务字典</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-select style="width:100%"  [(ngModel)]="system.dictKey" nzAllowClear name="dictKey" nzShowSearch [nzSize]="'large'"
                                   (ngModelChange)="checkSelect(system.dictKey)" required
                                   [nzPlaceHolder]="'业务字典'" nzId="value" (nzScrollToBottom)="scrollToBottom()">
                            <nz-option *ngFor="let option of options" [nzLabel]="option.dictKey + option.dictName" [nzValue]="option.guid">
                            </nz-option>
                            <nz-option [nzLabel]="'disabled'" [nzDisabled]="true" [nzValue]="'disabled'" *ngIf="loading">
                                <ng-template #nzOptionTemplate>
                                    <i class="anticon anticon-loading anticon-spin"></i> Loading...
                                </ng-template>
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>

            <div *ngIf="expandForm && system.valueFrom === 'D' && isValueshow"   nz-col [nzSpan]="8" class="mb-md" >
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment">   <label for="keyName">参数值</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-select style="width:100%" [(ngModel)]="system.value" nzAllowClear name="value" nzShowSearch  [nzSize]="'large'" required  #value="ngModel" [nzPlaceHolder]="'参数值'" nzId="value">
                            <nz-option *ngFor="let i of configValue" [nzLabel]="i.itemValue + i.itemName" [nzValue]="i.guid"></nz-option>
                        </nz-select>

                    </div>
                </div>
            </div>
            <div *ngIf="expandForm && system.valueFrom === 'H'"   nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-col [nzSpan]="8"   nz-form-label class="alignment">   <label for="keyName">参数值</label></div>
                    <div nz-col [nzSpan]="16" nz-form-control>
                        <nz-input [(ngModel)]="system.value" name="stringvalue" [nzSize]="'large'" required  #value="ngModel" [nzPlaceHolder]="'参数值'" nzId="stringvalue"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                <a (click)="expandForm=!expandForm">
                    {{expandForm ? '收起' : '展开'}}
                    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                </a>
            </div>
        </div>
    </form>
    <!--列表组件-->
    <app-list #child [initDate]="data"
              (addCreat)="addHandler($event)"
              [selectedRows]="selectedRows"
              (buttonData)="buttonDataHandler($event)"
              (pageNumber)="monitorHandler($event)"
              (buttonEvent) = "buttonEvent($event)"
              (deleatData)="deleatData($event)"
              [configTitle]="configTitle"
              (isActive)="isActive($event)"
              (deleteBatch)="deleteBatch($event)"
              (selectedRow)="selectedRow($event)"
              [headerDate]="headerData"
              [loading]="loading"
              [buttons] = 'buttons'
              [pageindex]='system.pi'
              [moreData]="moreData"
              [total]="total"></app-list>
</nz-card>


<!-- 弹出框 -->
<nz-modal [nzVisible]="modalVisible" [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="sysTitle" [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false"      [nzFooter]="modalFooter">
    <ng-template #modalContent>
        <form novalidate  (ngSubmit)="save(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>应用系统</label><span [ngClass]="{'fromErrors':config.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" nzAllowClear [(ngModel)]="sysAdd.guidApp" name="guidApp"  required  #config="ngModel"  [nzSize]="'large'" [nzPlaceHolder]="'应用系统'" nzId="guidApp">
                                <nz-option *ngFor="let i of guidApp; let app = index" [nzLabel]="i.appCode + '---' + i.appName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="config.errors?.required && config.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择应用系统
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">参数组别</label><span [ngClass]="{'fromErrors':groupName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="sysAdd.groupName" name="groupName" [nzSize]="'large'" required #groupName="ngModel" [nzPlaceHolder]="'参数组别'" nzId="groupName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="groupName.errors?.required && groupName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择参数组别
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">参数键</label><span [ngClass]="{'fromErrors':keyName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="sysAdd.keyName" name="keyName" [nzSize]="'large'" required #keyName="ngModel"  [nzPlaceHolder]="'参数键'" nzId="keyName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="keyName.errors?.required && keyName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择参数键
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">值来源方式</label><span [ngClass]="{'fromErrors':f.controls.valueFrom?.errors}">* </span></div>
                        <div nz-col [nzSpan]="6" nz-form-control>
                            <nz-radio-group [(ngModel)]="sysAdd.valueFrom" name="valueFrom" required >
                                <span *ngFor="let i of valueFrom;">
                                    <label  nz-radio   [nzValue]='i.key'>
                                        <span>{{i.text}}</span>
                                    </label>
                                </span>
                            </nz-radio-group>
                        </div>
                        <div nz-col [nzSpan]="12" nz-form-control  *ngIf="sysAdd.valueFrom === 'D'">
                            <nz-select style="width:100%"  nzAllowClear [(ngModel)]="sysAdd.dictKey" name="dictKey" nzShowSearch [nzSize]="'large'"
                                       (ngModelChange)="checkSelect(sysAdd.dictKey)" required
                                       [nzPlaceHolder]="'业务字典'" nzId="value"
                                       (nzScrollToBottom)="scrollToBottom()">
                                <nz-option *ngFor="let option of options" [nzLabel]="option.dictKey + option.dictName" [nzValue]="option.guid">
                                </nz-option>
                                <nz-option [nzLabel]="'disabled'" [nzDisabled]="true" [nzValue]="'disabled'" *ngIf="loading">
                                    <ng-template #nzOptionTemplate>
                                        <i class="anticon anticon-loading anticon-spin"></i> Loading...
                                    </ng-template>
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="f.controls.valueFrom?.errors && f.controls.valueFrom.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择值来源方式
                    </div>
                    <div *ngIf="f.controls.dictKey?.errors && f.controls.dictKey.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择一个业务字典
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="sysAdd.valueFrom === 'H'">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">参数值</label><span [ngClass]="{'fromErrors':value.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="sysAdd.value" name="stringvalue" [nzSize]="'large'" required  #value="ngModel" [nzPlaceHolder]="'参数值'" nzId="stringvalue"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="value.errors?.required && value.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择参数值
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="sysAdd.valueFrom === 'D' && isValueshow">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">参数值</label><span [ngClass]="{'fromErrors':value.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="sysAdd.value" nzAllowClear name="value" nzShowSearch
                                       [nzSize]="'large'" required  #value="ngModel"
                                       (ngModelChange)="checkValueSelect(sysAdd.value)"
                                       [nzPlaceHolder]="'参数值'"
                                       nzId="value">
                                    <nz-option *ngFor="let i of configValue" [nzLabel]="i.itemValue + i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="value.errors?.required && value.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择参数值
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">参数描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="sysAdd.description" nzAutosize=true   nzType="textarea" name="description" [nzSize]="'large'" [nzPlaceHolder]="'参数描述'"
                                      nzId="description"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="modalVisible = false">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>
